<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li{list-style: none;}
    </style>
</head>
<body>
    <div id="app">
        <div>
            变更方法: 
            <button @click="sortList">点击排序</button>
            <button @click="addEleToList">点击新增</button>
        </div>
        <div>
            替换数组
            <button @click="concatEleToList">点击新增(concat)</button>
            <button @click="list = []">清空数据</button>
        </div>
       <div>
            无法检测数据数据变化:
            <button @click="EditEleToList">点击修改</button>
            <button @click="deleteEleToList">删除尾部元素(length--)</button>
       </div>
       <!-- 先渲染对应list元素个数的li 在对每个li进行v-if 条件渲染判断 -->
       <!-- 只渲染偶数 -->
        <ul>
            <li v-for="item,index in list" :key="index" v-if="item % 2 == 0">
                {{item}}
            </li>
        </ul>

        <!-- 有数据就渲染 否则就不渲染 -->
        <ul v-if="list.length>0">
            <li v-for="item,index in list" :key="index" >
                {{item}}
            </li>
        </ul>
        <ul v-else>
            暂无数据
        </ul>

     
    </div>
</body>
<script>

    // 当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，
  
   
 

    var vm = new Vue({
        el:"#app",
        data:{
            // 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。深入响应式原理中有相关的讨论。
            // 默认情况下,对list属性的数据绑定了数据监听,当list的值发生改变会重新更新视图
            list:[1,4,7,2,5,8,3,6,9],
        },
        methods: {
            sortList(){
                this.list.sort((a,b)=>a-b);
            },
            addEleToList(){
                var num = Math.round(Math.random()*100);  //随机数值
                var index = Math.floor(Math.random()*this.list.length); // 随机下标
                this.list.splice(index,0,num);
            },
            concatEleToList(){
                var num = Math.round(Math.random()*100); 
                this.list = this.list.concat(num); // concat返回是新数组
            },
            EditEleToList(){
                this.$set(this.list,0,101)
            },
            deleteEleToList(){
                this.list.length&&this.list.length -- ;
                console.log(this.list);

                this.$forceUpdate(); 
            }

        },
    })






</script>
</html>